<template>
  <div class="user-member">
    <!-- 部门树 -->
    <div class="dept-menu">
      <dept-menu ref="deptMenu" @select="onDeptSelect" />
    </div>

    <!-- 人员表 -->
    <div class="mod-config">
      <div>
        当前部门：
        <el-tag v-if="dept" size="medium" type="primary">{{ dept.name }}</el-tag>
        <el-tag v-else size="medium" type="danger">没有选择任何部门</el-tag>
      </div>

      <member-header
        :dept="dept"
        style="marginTop:20px"
        :can-multi-delete="canMultiDelete"
        @loadUserList="loadUserList"
        @refreshDeptMenu="refreshDeptMenu"
        @multiDelete="multiDelete"
        @onSearch="onSearch"
        @onCloseSearch="onCloseSearch"
      />

      <member-table
        ref="memberTable"
        :condition="searchCondition"
        :dept-id="dept ? dept.id : '0'"
        @selectionChanged="selectionChanged"
        style="marginTop:20px"
      />
    </div>
  </div>
</template>

<script>
import DeptMenu from './dept-menu'
import MemberHeader from './member/member-header'
import MemberTable from './member/member-table'

export default {
  data() {
    return {
      dept: null,
      searchCondition: null,
      canMultiDelete: false
    }
  },
  components: {
    DeptMenu,
    MemberHeader,
    MemberTable
  },
  methods: {
    selectionChanged(val) {
      this.canMultiDelete = val && val.length > 0
    },
    multiDelete() {
      this.$refs.memberTable.multiDeleteUser()
    },
    refreshDeptMenu() {
      this.$refs.deptMenu.buildTree()
    },
    onDeptSelect(dept) {
      this.dept = dept
    },
    onSearch(searchCondition) {
      this.searchCondition = searchCondition
      this.$refs.memberTable.reload()
    },
    onCloseSearch() {
      this.searchCondition = null
    },
    loadUserList() {
      this.$refs.memberTable.reload()
    }
  },
  created() {
    this.$store.dispatch('user/loadUserDict_4')
    this.$store.dispatch('user/loadCraftList')
  }
}
</script>

<style lang="less" scoped>
.user-member {
  display: flex;
  height: 100%;
  width: auto;
  overflow: auto;
  /*overflow-y: auto;*/
  /*overflow-x: hidden;*/
  border: 2px solid #f5f5f5;
  border-radius: 2px;

  .dept-menu {
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

    ::-webkit-scrollbar {
      width: 2px;
      height: 2px;
      background-color: #f5f5f5;
    }

    /*定义滚动条轨道 内阴影+圆角*/

    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      background-color: #f5f5f5;
    }

    /*定义滑块 内阴影+圆角*/

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #c8c8c8;
    }
  }

  .mod-config {
    padding: 20px;
    flex: 1;
    overflow: auto;

    .btn-group {
      margin: 20px 0;
      margin-right: 20px;
    }
  }
}
</style>
